<template>
	<view class="week-list">
		<view v-for="item in weeklist" class="week-box" :key="item.id">
			<view @click="onJump(item)">
				<view class="pic"><image class="img" :src="formatPic((item.smallPic || item.pic), 'thumb150')" :alt="item.title" /></view>
				<text class="title">{{ item.title }}</text>
				<text class="status" :class="{ today: item.isDate }">{{ isNumber(item.status) ? '第' + item.status + '话' : item.status }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { formatPic, isNumber } from '@/utils/index';
export default {
	data() {
		return {};
	},
	props: ['weeklist'],
	methods: {
		formatPic,
		isNumber,
		onJump(item) {
			uni.navigateTo({
				url: item.pid ? `/pages/play/index?id=${item.id}&pid=${item.pid}` : `/pages/subject/index?id=${item.id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/static/scss/mixin.scss';
.week {
	&-list {
		position: relative;
		display: flex;
		flex-flow: row wrap;
		align-content: flex-start;
	}
	&-box {
		width: 225rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		.pic {
			position: relative;
			width: 225rpx;
			height: 225rpx;
			border-radius: 10rpx;
			overflow: hidden;
			box-shadow: 0 3rpx 14rpx 0 hsla(23, 13%, 76%, 0.4);
			z-index: 2;
			.img {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				overflow: auto;
				display: block;
				width: 100%;
				height: 225rpx;
			}
		}
		.title {
			height: 32rpx;
			line-height: 32rpx;
			margin-top: 15rpx;
			font-size: 24rpx;
			color: #333;
			@include clamp(1);
		}
		.status {
			font-size: 24rpx;
			color: #999;
			&.today {
				color: #0084ff;
			}
		}
	}
}
</style>
